<template style="overflow: hidden">
	<el-header class="header"
						 style="position: fixed; top: 0; left: 0; right: 0; z-index: 1200;width: 200%;max-height:30px;margin-left: -15px;">
		<el-menu
				class="header-menu"
				mode="horizontal"
				style="background: linear-gradient(to right, #3f9dfd, #f6b4b4, #f6b4b4, #f6b4b4); font-weight: bolder; color: #bfcbd9; border: none;"
				active-text-color="blue"
		>
			<el-menu-item index="1" class="menu-item">首页</el-menu-item>
			<el-menu-item index="2" class="menu-item">关于</el-menu-item>
			<el-menu-item index="3" class="menu-item">联系我们</el-menu-item>
			<el-button
					style="color: #3f9dfd; font-weight: bold; font-size: 14px; border: none; background: none; margin-left: 36%; margin-top: 10px;"
					@click="exit()"
			>
				管理员
			</el-button>
		</el-menu>


	</el-header>
	<div class="admin-container" style="margin-top: 10px; padding: 20px 0;">
		<el-main class="main-content">
			<component :is="currentComponent"></component>
		</el-main>
		<el-button class="toggle-sidebar-btn text-button" @click="toggleSidebar" style="margin-top:2.5%;margin-left:80%"
							 v-if="!sidebarVisible">
			{{ sidebarVisible ? '关闭' : '更多管理选项' }}
			<el-icon style="margin-left: 10px;">
				<Expand/>
			</el-icon>
		</el-button>
		<div v-if="sidebarVisible" class="sidebar-mask" @click="toggleSidebar"></div>
		<transition name="sidebar-slide">
			<el-aside v-show="sidebarVisible" class="sidebar">
				<el-scrollbar>
					<el-menu :default-openeds="['1', '3']">
						<el-sub-menu index="1">
							<template #title>
								<i class="el-icon-user"></i>
								<span>人事管理</span>
							</template>
							<el-menu-item index="1-1" @click="goToUserManagementView">学生信息管理</el-menu-item>
							<el-menu-item index="1-2" @click="goToPublicAnnouncementManagementView">社团信息管理</el-menu-item>
						</el-sub-menu>

		

						<el-sub-menu index="2">
							<template #title>
								<i class="el-icon-s-flag"></i>
								<span>测试</span>
							</template>
							<el-menu-item index="2-1" @click="goToManagementOfTest">测试</el-menu-item>
						</el-sub-menu>
					</el-menu>
				</el-scrollbar>
			</el-aside>
		</transition>
	</div>
</template>
<script>
import {defineComponent, onMounted, ref} from 'vue';
import UserManagementView from "@/views/AdminTerminal/UserManagementView.vue";
import PublicAnnouncementManagementView from "@/views/AdminTerminal/PublicAnnouncementManagementView.vue";import {Expand} from "@element-plus/icons-vue";
import {ElMessageBox} from "element-plus";
import test from "@/components/ServiceTerminal/test.vue";
import store from "@/store/index.js";

export default defineComponent({
	components: {
		test,
		Expand,
		UserManagementView,
		PublicAnnouncementManagementView,
	
	},
	methods: {
		exit() {
			ElMessageBox.confirm('确定要退出吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
					.then(() => {
						this.$router['push']('/');
						this.$store.commit('setCurrentUser', null);
					})
					.catch(() => {
					});
		},
		logout() {
			this.$router['push']('/');
		}
	},
	setup() {
		const sidebarVisible = ref(false);
		const showLabel = ref('');
		const buttonPosition = ref({
			x: 20,
			y: 100
		}); // 初始化按钮位置
		let isDragging = false;
		let startPosition = {
			x: 0,
			y: 0
		};
		let showModal = false

		function startDrag(event) {
			isDragging = true;
			startPosition = {
				x: event.clientX,
				y: event.clientY
			};

			// 添加mousemove事件监听，用于实时更新按钮位置
			window.addEventListener('mousemove', onDrag);
		}

		function logout() {
			this.$store.commit('setCurrentUser', null);
			this['$router']['push']('/');
			showModal = false; // 关闭模态框
		}

		function onDrag(event) {
			if (isDragging) {
				const deltaX = event.clientX - startPosition.x;
				const deltaY = event.clientY - startPosition.y;
				buttonPosition.value = {
					x: buttonPosition.value.x + deltaX,
					y: buttonPosition.value.y + deltaY
				};
				startPosition = {
					x: event.clientX,
					y: event.clientY
				};
			}
		}

		const currentComponent = ref(store.state.AdminTerminalCurrentComponent); // 当前显示的组件
		function toggleModal() {
			this.showModal = !this.showModal;
		}

		// 导航到不同管理页面的方法
		function goToUserManagementView() {
			currentComponent.value = UserManagementView;
			// sidebarVisible.value = false; // 点击后隐藏侧边栏
			changeComponent('UserManagementView')
			showLabel.value = '学生信息管理';
		}

		function toggleSidebar() {
			sidebarVisible.value = !sidebarVisible.value;
		}

		function goToPublicAnnouncementManagementView() {
			currentComponent.value = PublicAnnouncementManagementView;
			// sidebarVisible.value = false; // 点击后隐藏侧边栏
			changeComponent('PublicAnnouncementManagementView')
			showLabel.value = '社团信息管理';
		}

		
		function goToManagementOfTest() {
			currentComponent.value = test;
			changeComponent('test');
			showLabel.value = '测试';
		}
		function changeComponent(componentName) {
			currentComponent.value = componentName;
			store.dispatch('setAdminTerminalCurrentComponentAction', componentName);
			console.log( "sdafsadf"+store.state.AdminTerminalCurrentComponent)
		}


		onMounted(() => {
			// 使用 Vuex 中存储的组件名称初始化 currentComponent
			currentComponent.value = store.state.AdminTerminalCurrentComponent;
			console.log(currentComponent.value)
		});
		return {
			goToManagementOfTest,
			logout,
			showModal,
			showLabel,
			sidebarVisible,
			currentComponent,
			toggleSidebar,
			goToUserManagementView,
			goToPublicAnnouncementManagementView,
			
		};
	}
});
</script>

<style scoped>

.modal {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: white;
	padding: 20px;
	border-radius: 5px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	z-index: 1000; /* Ensure modal is above other content */
}

.nav-list {
	list-style-type: none;
	padding: 0;
}

.nav-item {
	margin-bottom: 10px;
}

.logout-button {
	background-color: #f56c6c;
	color: white;
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
}

.navbar-left a {
	/* 设置默认的样式 */
	text-decoration: none; /* 去除下划线 */
	padding: 8px; /* 添加内边距 */
	border-radius: 4px; /* 添加圆角 */
	/* 其他您想要的样式 */
}

/* 当路由激活时，改变背景和文字颜色 */
.navbar-left .router-link-exact-active {
	background: linear-gradient(to top, #1212c8, #09b609); /* 激活路由的背景颜色 */
	color: white; /* 激活路由的文字颜色 */
}

.nav-list {
	list-style: none; /* 去掉默认的列表项目符号 */
	padding: 0;
	margin: 0;
}

.nav-item {
	width: 150px; /* 设置小方块的宽度 */
	height: 80px; /* 设置小方块的高度 */
	line-height: 80px; /* 设置垂直居中 */
	text-align: center; /* 设置水平居中 */
	border: 1px solid #ddd; /* 添加边框 */
	margin: 5px; /* 设置外边距 */
	background-color: #f9f9f9; /* 设置背景颜色 */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
	border-radius: 4px; /* 添加圆角 */
}

/* 样式定义了按钮、模态框和导航栏的样式 */
.text-button {
	max-height: 42px;
	max-width: 90px;
	min-height: 42px;
	min-width: 180px;
	font-size: 20px;
	padding: 5px 20px;
	border: 2px solid #007bff;
	border-radius: 5px;
	background-color: #f9f9f9;
	color: #007bff;
	cursor: pointer;
	transition: background-color 0.3s, color 0.3s;
}

button.hover {
	background-color: #3777bb;
	color: white;
}

.modal {
	position: absolute;
	right: 0;
	top: 100%;
	margin-top: 10px; /* 调整模态框与头像的间距 */
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding: 1rem;
	z-index: 20;
}

.logout-button {
	width: 100%;
	padding: 0.5rem 1rem;
	border: none;
	background-color: #007bff;
	color: white;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s;
}

.logout-button:hover {
	background-color: #0056b3;
}

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem 1rem;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-left a,
.navbar-right a {
	margin: 0 0.5rem;
	text-decoration: none;
	color: #333;
	padding: 0.5rem 1rem;
	border-radius: 4px;
	transition: background-color 0.3s;
}

.navbar-left a:hover,
.navbar-right a:hover {
	background-color: #f5f5f5;
}

.navbar-right {
	display: flex;
	align-items: center;
}

.user-profile {
	cursor: pointer;
	display: flex;
	align-items: center;
	margin-right: 1rem;
}

.user-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 0.5rem;
}

.login-button,
.register-button,
.logout-button {
	padding: 0.5rem 1rem;
	border: none;
	background-color: #007bff;
	color: white;
	border-radius: 4px;
	cursor: pointer;
	transition: background-color 0.3s;
}

.login-button:hover,
.register-button:hover,
.logout-button:hover {
	background-color: #0056b3;
}

.modal {
	position: absolute;
	right: 0;
	top: 100%;
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	padding: 1rem;
	z-index: 20;
}

.fade-enter-active, .fade-leave-active {
	transition: opacity 0.5s;
}

.fade-enter, .fade-leave-to {
	opacity: 0;
}

.admin-container {
	position: relative; /* 确保侧边栏和主内容区在同一层级 */
	height: calc(100vh - 64px); /* 主内容区高度减去导航栏高度 */
	display: flex;
	overflow: hidden; /* 确保侧边栏悬浮时不影响主内容区 */
}

.main-content {
	flex: 1;
	overflow: auto;
	padding: 20px; /* 确保内容距离侧边栏的间距 */
	transition: margin-left 0.3s ease; /* 平滑过渡效果 */
}

.sidebar {
	position: fixed; /* 使侧边栏固定在视口中 */
	top: 38px; /* 与导航栏下边界对齐 */
	right: 0;
	bottom: 0;
	width: 250px; /* 侧边栏宽度 */
	background-color: #f1f1f1;
	z-index: 1000; /* 确保侧边栏在主内容区上方 */
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease; /* 平滑过渡效果 */
}

.sidebar-mask {
	position: fixed;
	top: 38px; /* 遮罩从导航栏下边界开始 */
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.3); /* 半透明遮罩 */
	z-index: 900; /* 确保遮罩在侧边栏下方 */
}

.toggle-sidebar-btn {
	position: fixed;
	top: 20px;
	left: 20px;
	z-index: 1100; /* 确保按钮在侧边栏之上 */
}

.sidebar-slide-enter-active,
.sidebar-slide-leave-active {
	transition: transform 0.3s ease; /* 过渡效果的定义 */
}

.sidebar-slide-enter,
.sidebar-slide-leave-to /* .sidebar-slide-leave-active 在 <transition> 中不可用 */
{
	transform: translateX(250px); /* 侧边栏进入时移动到左侧隐藏，离开时移回 */
}

.header-menu {
	border-bottom: none; /* 移除底部边框 */
	max-height: 50px; /* 调整最大高度 */
	margin-left: 0;
	box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08); /* 添加阴影效果 */
}

.header-menu .el-menu-item {
	font-size: 18px; /* 调整字体大小 */
	font-weight: 600; /* 加粗字体 */
	height: 50px; /* 调整高度 */
	line-height: 60px; /* 调整行高 */
	border-bottom: 3px solid transparent; /* 添加透明底部边框 */
	transition: border-color 0.3s, background-color 0.3s; /* 添加过渡效果 */
}

.header-menu .el-menu-item:hover {
	background-color: #0051ff !important; /* 鼠标悬停背景色 */
}

.header-menu .el-menu-item.is-active {
	border-bottom-color: #f36b6b !important; /* 激活项底部边框颜色 */
	background-color: #f8b5b5 !important; /* 激活项背景色 */
}
h1{
	background-clip: padding-box;
	background: -webkit-linear-gradient(95deg, #007d51 75%, #e500ff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-weight: bolder;
}
/* 可以添加一些额外的样式来美化菜单项 */
.menu-item {
	padding: 0 20px; /* 调整内边距 */
}

</style>
